<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" @keyup.enter.native="search()">
      <el-form-item label="  奖品编码">
        <br> <br>
        <el-input v-model="formInline.prizeCode" placeholder clearable style="margin-left:-70px;width:200px"></el-input>
      </el-form-item>
      <el-form-item label="  奖品名称">
        <br> <br>
        <el-input v-model="formInline.prizeName" placeholder clearable style="margin-left:-70px;width:200px"></el-input></el-form-item>
      <el-form-item label="  奖品类型">
        <br> <br>
        <el-select v-model="formInline.prizeType" clearable style="margin-left:-70px;width:200px">
          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <div style="width:100%;display:flex;justify-content:flex-end;">
<el-form-item><el-button type="primary" @click="search()" size="mini" icon="el-icon-search">查询</el-button></el-form-item>
      <el-form-item><el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete">清空</el-button></el-form-item>
      <el-form-item><el-button type="primary" @click="toAdd()" icon="el-icon-edit" size="mini">新增</el-button></el-form-item>
      </div>
      
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      border
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      v-loading="loading"
    >
      <el-table-column type="index" label="序号" align="center" width="60" ></el-table-column> 
 
      <el-table-column prop="prizeName" label="奖品名称" width align="left" show-overflow-tooltip></el-table-column>
<el-table-column prop="prizeCode" label="奖品编码" width align="left"></el-table-column> 
 <el-table-column align="center" prop="prizePicture" label="奖品图片" width>
        <template slot-scope="scope">
          <img
            :src="scope.row.prizePicture"
            v-if="scope.row.prizePicture != '' && scope.row.prizePicture != null"
            width="70"
            height="50"
          />
        </template>
      </el-table-column> 
 <el-table-column prop="prizeType" label="奖品类型" width align="left">
        <template slot-scope="scope">
          <span v-if="scope.row.prizeType != null">{{ scope.row.prizeType === 1 ? "虚拟奖品" : "实物奖品" }}</span>
          <span v-if="scope.row.prizeType == null">-</span>
        </template>
      </el-table-column> 
 
      <el-table-column prop="prizeInfo" label="奖品描述" width align="left" show-overflow-tooltip></el-table-column>
    <!-- <el-table :data="tableData" border row-key="id" align="left"    :header-cell-style="{ background: '#eef1f6', color: '#606266' }"> -->
          <!-- <el-table-column type="index" label="序号" align="center" width="60" fixed></el-table-column>  -->
          <!-- <el-table-column
                          width="60px"
                          label="序号"
                          type="index">
                    </el-table-column> -->
      <!-- <el-table-column v-for="(item, index) in col" :key="`col_${index}`" :prop="dropCol[index].prop" :width="dropCol[index].width" :label="item.label">
        <template slot-scope="scope">
          <img
            :src="scope.row[dropCol[index].prop]"
            v-if="dropCol[index].prop === 'prizePicture'&&scope.row[dropCol[index].prop]"
            width="70"
            height="50"
          />
          <span v-if="dropCol[index].prop !== 'prizePicture'">{{ dropCol[index].prop==='prizeType'?(scope.row[dropCol[index].prop]===1?"虚拟奖品" : "实物奖品"):scope.row[dropCol[index].prop] }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" width="280" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="toEdit(scope.row)">编辑</el-button>
          <el-button type="text" size="mini" @click="handledelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <pre style="text-align: left">
      {{dropCol}}
    </pre>
    <hr>
    <pre style="text-align: left">
      {{tableData}}
    </pre> -->
    <!-- </el-table> -->
    <el-form :inline="true" :model="formInline"><el-form-item style="margin-top: 6px;"></el-form-item></el-form>
    <div class="block" style="margin-top:-49px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100]"
        :current-page="listQuery.current"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog :visible.sync="dialogVisibleImg"><img width="100%" :src="dialogImageUrl" alt /></el-dialog>
  </div>
</template>

<script>
import Sortable from 'sortablejs';
import { queryPrize, addPrize, deletePrize, updatePrize } from '@/api/prizeLibrary';
import imageUpload from '@/page/common/Image-upload';
import qs from 'qs';
export default {
  data() {
    return {
      tableData: [],
      loading: true,
      disabled: false,
      flag: true,
      col: [
        // {
        //   label: '序号',
        //   prop: 'index'
        // },
        {
          label: '奖品编码',
          prop: 'prizeCode',
      
        },
        {
          label: '奖品名称',
          prop: 'prizeName'
        },
        {
          label: '奖品描述',
          prop: 'prizeInfo'
        },
        {
          label: '奖品图片',
          prop: 'prizePicture'
        },
        {
          label: '奖品类型',
          prop: 'prizeType'
        }
      ],
      dropCol: [
        // {
        //     label: '序号',
        //     prop: 'index'
        //   },
        {
          label: '奖品编码',
          prop: 'prizeCode',
     
        },
        {
          label: '奖品名称',
          prop: 'prizeName'
        },
        {
          label: '奖品描述',
          prop: 'prizeInfo'
        },
        {
          label: '奖品图片',
          prop: 'prizePicture'
        },
        {
          label: '奖品类型',
          prop: 'prizeType'
        }
      ],
      typeOptions: [{ value: '1', label: '虚拟奖品' }, { value: '2', label: '实物奖品' }],
      total: 0,
      listQuery: {
        current: 1,
        size: 100
      },
      dialogVisibleImg: false,
      dialogImageUrl: '',
      formInline: {
        prizeCode: '',
        prizeName: '',
        prizeType: ''
      },
      rules: {}
    };
  },
  mounted() {
    this.getDataList();
    document.body.ondrop = function(event) {
      event.preventDefault();
      event.stopPropagation();
    };
    // this.rowDrop()
    // this.columnDrop();
  },
  components: {
    imageUpload
  },
  created() {},
  methods: {
    // columnDrop() {
    //   const wrapperTr = document.querySelector('.el-table__header-wrapper tr');
    //   this.sortable = Sortable.create(wrapperTr, {
    //     animation: 180,
    //     delay: 0,
    //     onEnd: evt => {
    //       const oldItem = this.dropCol[evt.oldIndex];
    //       this.dropCol.splice(evt.oldIndex, 1);
    //       this.dropCol.splice(evt.newIndex, 0, oldItem);
    //     }
    //   });
    // },

    kong() {
      this.formInline.prizeCode = '';
      this.formInline.prizeName = '';
      this.formInline.prizeType = '';
    },
    search() {
      this.loading = true;
      this.listQuery.current = 1;
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          prizeCode: this.formInline.prizeCode,
          prizeName: this.formInline.prizeName,
          prizeType: this.formInline.prizeType,
          status: 1
        }
      };
      queryPrize(data).then(res => {
        this.loading = false;
        this.total = res.total;
        this.tableData = res.records;
      });
    },
    handledelete(v) {
      let data = {
        uuid: v.uuid
      };
      this.$confirm('确认删除吗？').then(_ => {
        deletePrize(data).then(res => {
          this.$message({
            showClose: true,
            message: res.message,
            type: res.code == 1 ? 'success' : 'error'
          });
          this.getDataList();
        });
      });
    },
    toAdd() {
      this.$router.push({
        name: 'prizeLibraryEdit',
        params: {}
      });
    },
    toEdit(item) {
      this.$router.push({
        name: 'prizeLibraryEdit',
        params: {
          edit: item
        }
      });
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getDataList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getDataList();
    },

    getDataList() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          status: 1
        }
      };
      queryPrize(data).then(res => {
        this.loading = false;
        this.total = res.total;
        this.tableData = res.records;
      });
    }
  }
};
</script>
<style lang="less" scoped>
.el-form-item .el-select {
  width: 100%;
}
</style>
